.pub_order {
    .page_box {
        background-color: #f8f8f8;
        padding: calc(var(--status-bar-height) + 100rpx) 0 0 0;

        .tab_div {
            width: 100%;
            height: 120rpx;
            display: flex;
            background-color: #fff;
            padding: 20rpx 0 0 0;

            .tab {
                width: 25%;
                height: 90rpx;
                line-height: 90rpx;
                text-align: center;
                color: #212121;
                font-size: 30rpx;
                position: relative;
            }

            .tab_active {
                color: #ED2E2E;
            }

            .tab_active::before {
                width: 100rpx;
                height: 4rpx;
                background-color: #ED2E2E;
                position: absolute;
                left: 50%;
                margin: 0 0 0 -50rpx;
                bottom: 0;
                content: "";
                border-radius: 2rpx;
            }
        }

        .lis_div {
            height: calc(100% - 94rpx - 50rpx);

            .lis{
                padding: 30rpx 0 140rpx 0;
            }

            .li {
                width: calc(100% - 60rpx);
                background-color: #fff;
                border-radius: 24rpx;
                margin: 30rpx auto;
                padding: 30rpx;
                display: flex;
                flex-wrap: wrap;
                position: relative;
                overflow: hidden;

                .img {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 4rpx;
                    overflow: hidden;
                }

                .status {
                    width: 120rpx;
                    height: 50rpx;
                    position: absolute;
                    right: 0;
                    top: 0;
                    text-align: center;
                    font-size: 24rpx;
                    line-height: 50rpx;
                    padding: 0 10rpx;
                    color: #fff;
                    background-color: #ED2E2E;
                    border-bottom-left-radius: 20rpx;
                }

                .good_info {
                    width: calc(100% - 230rpx);
                    margin: 0 0 0 30rpx;

                    .title {
                        line-height: 40rpx;
                        color: #000;
                        font-size: 28rpx;
                        width: calc(100% - 130rpx);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .p_1 {
                        font-size: 24rpx;
                        color: #777;
                        line-height: 30rpx;
                        margin: 18rpx 0;
                    }

                    .p_2 {
                        font-size: 24rpx;
                        color: #ACACAC;
                        line-height: 30rpx;
                        margin: 18rpx 0;

                        .span_1 {
                            color: #e97b7b;
                            padding: 0 4rpx 0 0;
                        }

                        .span_2 {
                            float: right;
                        }
                    }

                    .p_3 {
                        font-size: 24rpx;
                        color: #ACACAC;
                        line-height: 30rpx;

                        .span_1 {
                            color: #ED2E2E;
                            padding: 0 4rpx 0 0;
                            font-weight: bold;
                            font-size: 28rpx;
                        }
                    }
                }

                .other_info {
                    width: 100%;
                    margin-top: 30rpx;

                    .p_1 {
                        font-size: 24rpx;
                        color: #ACACAC;
                        line-height: 40rpx;

                        .span {
                            color: #777;
                            line-height: 40rpx;
                        }

                        .span_1 {
                            color: #555;
                            font-size: 24rpx;
                            margin: 0 0 0 20rpx;
                        }
                    }
                }

                .btns {
                    width: 100%;
                    display: flex;
                    justify-content: flex-end;
                    padding: 30rpx 0 10rpx 0;

                    .btn {
                        width: auto;
                        height: 60rpx;
                        line-height: 60rpx;
                        color: #fff;
                        margin: 0 0 0 30rpx;
                        padding: 0 30rpx;
                        font-size: 28rpx;
                        border-radius: 10rpx;
                    }
                }
            }

            .li:nth-child(1) {
                margin: 0 auto;
            }
        }
    }
}